/*
 * Description: 群、好友列表
 * Author: wangyifei
 * DateCreated: 2024-06-06 19:08
 */

import {
	useEffect,
	useImperativeHandle,
	useState,
	type Dispatch,
	type SetStateAction,
	type MutableRefObject
} from 'react';
import { GroupListStyle } from './style';
import { Avatar, Dropdown, Input } from 'antd';
import { selectGroupList, type GroupParam, type GroupRes } from '../../http/chatting-group';
import { formatChatContentTime } from '../../utils/time';
import { formatLastMsg } from '../../utils';
import { serverURL } from '../../config';
import { PlusOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import CreateGroup from './CreateGroup';
import type { SearchProps } from 'antd/es/input';

type GroupListProps = {
	groupRef: MutableRefObject<GroupListRef>;
	setActiveGroup: Dispatch<SetStateAction<GroupRes>>;
};
export type GroupListRef = {
	refreshGroupList: () => void;
	resetActive: () => void;
};

const GroupList = (props: GroupListProps) => {
	const { groupRef, setActiveGroup } = props;

	// 消息列表
	const [payload, setPayload] = useState<GroupParam>({});
	const [groupList, setGroupList] = useState<GroupRes[]>([]);
	const [activeId, setActiveId] = useState<number>();
	// 创建群聊
	const [createOpen, setCreateOpen] = useState(false);

	// 查询消息列表
	const queryGroupList = async () => {
		const { data } = await selectGroupList(payload);
		const find = data.find((item) => item.id === activeId);
		if (!find) {
			setActiveGroup(null);
			setActiveId(null);
		}
		setGroupList(data);
	};
	useEffect(() => {
		queryGroupList();
	}, [payload]);

	// 暴露方法
	useImperativeHandle(groupRef, () => ({
		refreshGroupList: queryGroupList,
		resetActive: () => setActiveGroup(null)
	}));

	// 搜索
	const handleSearch: SearchProps['onSearch'] = (value) => {
		if (value) {
			setPayload((prev) => ({ ...prev, title: value }));
		} else {
			setPayload({});
		}
	};

	return (
		<GroupListStyle>
			<div className="header">
				<Input.Search allowClear placeholder="搜索" size="small" onSearch={handleSearch} />
				<Dropdown
					trigger={['click']}
					menu={{
						items: [
							{
								key: '1',
								label: <div onClick={() => setCreateOpen(true)}>创建群聊</div>
							}
						]
					}}
				>
					<div className="plus_square">
						<PlusOutlined className="plus_outlined" />
					</div>
				</Dropdown>
			</div>
			<div className="chat_list">
				{groupList.map((item) => (
					<div
						key={item.id}
						className={classNames('chat_item', item.id === activeId && 'active')}
						onClick={() => {
							setActiveId(item.id);
							setActiveGroup(item);
						}}
					>
						<Avatar className="avatar" shape="square" src={serverURL + item.avatar} />
						<div className="chat_info">
							<div className="chat_title">
								<div className="title">{item.title}</div>
								<div className="date">
									{item.latestMsgTime ? formatChatContentTime(item.latestMsgTime) : ''}
								</div>
							</div>
							<div className="chat_msg">
								<div className="smg">{formatLastMsg(item)}</div>
								{/* <div className="online">!</div> */}
							</div>
						</div>
					</div>
				))}
			</div>

			{/* 创建群聊 */}
			<CreateGroup
				open={createOpen}
				onCancel={() => setCreateOpen(false)}
				refreshList={queryGroupList}
			/>
		</GroupListStyle>
	);
};

export default GroupList;
